<template>
	<view class="order">
		<view class="fixBox">
			<!-- tab 栏 -->
			<view class="tabBox">
				<view class="card" :style="{backgroundImage:'url('+baseUrl+'static/index/pull.png'+')'}">
					<view class="card_1">
						<view class="my">可提现金额（元）</view>
						<view class="curr" v-if="type == 2">￥{{region_commission||0}}</view>
						<view class="curr" v-if="type != 2">￥{{commission||0}}</view>
					</view>
				</view>
			</view>
			<!-- 提现 -->
			<view class="withdrawal">
				<view class="inputBox">
					<view class="symbol">¥</view>
					<input type="digit" v-model="price" placeholder="请输入提现金额">
				</view>
				<!-- <view class="now">
					<view class="text" style="margin: 0;">最低提现金额：￥100</view>
				</view> -->
			</view>
			<view class="btn1" @tap.stop="withdrawalBtn">提现到余额</view>
			<view class="tit">
				<view class="tit_l"></view>
				<view class="tit_r">提现记录</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_l">
					<view class="list_l_r">{{item.money||0}}</view>
				</view>
				<view class="list_r">
					<view class="time">{{item.createtime_text||''}}</view>
					<view class="btn">已成功</view>
				</view>
			</view>
		</view>
		<!-- 提示栏 -->
		<view class="more">{{isText}}</view>
	</view>
</template>

<script>
	import config from '@/common/config/config';
	export default {
		data() {
			return {
				baseUrl: config.baseurl,
				page: 1,
				list: [],
				isText: '',
				last_page: 1,
				commission: "",
				price: '',
				type:'',
				region_commission:''
			};
		},
		onLoad(e) {
			if (e) {
				this.type = e.type ? e.type : ''
			}
		},
		onShow() {
			this.init()
			this.loadData()
			this.getList()
		},
		methods: {
			init() {
				this.list = []
				this.page = 1
				this.isText = ''
			},
			// 获取总佣金
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						this.commission = res.data.userinfo.commission
						this.region_commission = res.data.userinfo.region_commission
					}
				});
			},
			// 提现
			withdrawalBtn() {
				let that = this

				if (that.price <= 0) {
					that.$wanlshop.msg('请正确输入提现金额');
					return;
				}
				var numArray = [];
				if (that.price.indexOf('.') !== -1) {
					numArray = that.price.split('.');
					if (numArray[1].length > 2) {
						that.$wanlshop.msg('请输入整数或2位以内的小数');
						return;
					}
					if (numArray.length >= 3) {
						that.$wanlshop.msg('请正确输入提现金额');
						return;
					}
				}

				uni.request({
					url: '/wanlshop/distribution/withdrawalToBalance',
					method: 'POST',
					data: {
						money: that.price,
						type: that.type
					},
					success: res => {
						that.$wanlshop.msg(res.msg);
						console.log(res.res, 'res')
						if (res.res.code == 1) {
							setTimeout(() => {
								this.$wanlshop.back(1);
							}, 1000)
						}

					}
				})
			},
			// 获取提现记录
			async getList() {
				let that = this
				await uni.request({
					url: '/wanlshop/distribution/withdrawalLog',
					method: 'POST',
					data: {
						page: this.page,
						type: that.type
					},
					success: res => {
						that.list = that.list.concat(res.data.data)
						that.last_page = res.data.last_page
						res.data.total == that.list.length ? that.isText = '暂无数据' : that.isText = ''
						console.log(that.list, 'that.list')
					}
				})
			},

		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				this.page += 1
				that.getList()
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #f9f9f9;
	}

	.u-tab-bar {
		display: none !important;
	}

	.order {
		width: 100vw;

		.more {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			margin: 30rpx auto;
			padding-bottom: 50rpx;
		}

		.fixBox {
			position: sticky;
			top: 0;
			background-color: #F7F7F7;
			padding-bottom: 10rpx;
		}

		.tit {
			width: 92%;
			margin: 30rpx auto;
			margin-bottom: 10rpx;
			height: 33rpx;
			line-height: 32rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.tit_l {
				height: 100%;
				background-color: #FC8E23;
				width: 6rpx;

			}

			.tit_r {
				height: 100%;
				color: #000;
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}

		.withdrawal {
			background: #fff;
			width: 100vw;
			width: 92%;
			margin: 30rpx auto;
			border-radius: 20rpx;
			padding: 30rpx 0;
			padding-top: 10rpx;

			.now {
				display: flex;
				justify-content: flex-start;
				padding: 0rpx 40rpx;
				font-size: 28rpx;
				color: #BABABA;

				.text {
					margin: 40rpx auto;
					font-weight: 400;
				}
			}

			.inputBox {
				width: 90%;
				margin: 30rpx auto;
				border-bottom: 1px solid #EFEFEF;
				display: flex;
				padding-bottom: 20rpx;

				.symbol {
					height: 60rpx;
					font-size: 50rpx;
					color: #000;
					margin-right: 20rpx;
					font-weight: 600;
				}

				input {
					height: 60rpx;
					font-size: 50rpx;
				}
			}

		}

		.btn1 {
			margin: 0 auto;
			width: 90%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			border-radius: 20rpx;
			background-color: #252525;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
		}

		.tabBox {
			width: 100%;
			height: 240rpx;

			.card {
				width: 94%;
				height: 100%;
				background-size: 100% 100%;
				border-radius: 20rpx;
				margin: 20rpx auto;
				padding: 20rpx;

				.card_1 {
					color: #fff;
					margin: 20rpx;

					.my {
						font-size: 28rpx;
					}

					.curr {
						font-size: 56rpx;
						font-weight: 600;
						margin-top: 30rpx;
					}

					.card_2 {
						text-align: center;
						margin-left: 430rpx;
						margin-top: 10rpx;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #fff;
						border-radius: 36rpx;
						color: #F3AE53;
						font-size: 26rpx;
					}
				}


			}
		}

		.listBox {
			width: 95%;
			margin: 30rpx auto;
			margin-top: 0;

			.list {
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.list_l {
					width: 40%;

					.list_l_r {
						font-size: 34rpx;
						margin-left: 20rpx;
						font-weight: 500;
						color: #E84010;
					}
				}

				.list_r {
					width: 40%;
					font-size: 26rpx;
					text-align: right;

					.time {
						color: #BABABA;
						margin-bottom: 10rpx;
					}

					.btn {
						color: #2CB9A4;

						font-size: 28rpx;
					}

				}
			}
		}
	}
</style>